<template>
  <div class="page-container" v-loading="pageLoading">
    <template v-if="detail.status > 2">
      <div class="detail-box">
        <div class="title">流程进度</div>
        <div class="steps">
          <el-steps
            :active="getStatus(detail.status)"
            space="100%"
            finish-status="success"
            align-center
          >
            <el-step title="订单确认"></el-step>
            <el-step title="发货"></el-step>
            <el-step title="收货"></el-step>
            <el-step title="结算"></el-step>
          </el-steps>
        </div>
        <div class="info-box">
          <el-row :gutter="30">
            <el-col :span="6">
              <div class="item">
                <div class="item-text">
                  <p class="label">已发车</p>
                  <p class="value">{{detail.logisticsStatisticsVo ? detail.logisticsStatisticsVo.inTransit : 0}}<span>辆</span></p>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="item">
                <div class="item-text">
                  <p class="label">待发车</p>
                  <p class="value">{{detail.logisticsStatisticsVo ? detail.logisticsStatisticsVo.toBeDelivered : 0}}<span>辆</span></p>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="item">
                <div class="item-text">
                  <p class="label">已收货</p>
                  <p class="value">{{detail.logisticsStatisticsVo ? detail.logisticsStatisticsVo.received : 0}}<span>辆</span></p>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="item">
                <div class="item-text">
                  <p class="label">待发总量</p>
                  <p class="value">{{detail.logisticsStatisticsVo ? detail.logisticsStatisticsVo.unreceivedTotal : detail.totalBudget}}<span>m³</span></p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="line"></div>
    </template>

    <div class="detail-box">
      <div class="title">订单详情</div>
      <div class="order-box">
        <div class="sub-title">订单信息</div>
        <div class="order-info">
          <p class="item">
            <span class="label">订单状态：</span>
            <span class="value"><b>{{detail.status | statusTxt}}</b></span>
          </p>
          <p class="item" v-if="detail.estimatedDeliveryTime">
            <span class="label">预计发货时间：</span>
            <span class="value"><b>{{detail.estimatedDeliveryTime}}</b></span>
          </p>
          <p class="item" v-else></p>
          <p class="item"></p>
          <p class="item">
            <span class="label">订单编号：</span>
            <span class="value">{{detail.num}}</span>
          </p>
          <p class="item">
            <span class="label">要求供应时间：</span>
            <span class="value">{{detail.supplyTime}}</span>
          </p>
          <p class="item">
            <span class="label">下单时间：</span>
            <span class="value">{{detail.finalApprovedTime}}</span>
          </p>
          <p class="item lang">
            <span class="label">收货人：</span>
            <span class="value">
              <i v-for="(item,index) in detail.receiverVoList" :key="index">{{item.name}} {{item.tel}}</i>
            </span>
          </p>
          <p class="item lang" v-if="detail.address">
            <span class="label">收货地址：</span>
            <span class="value">{{detail.address}}</span>
          </p>
        </div>
      </div>

      <div class="pro-box">
        <div class="sub-title">商品明细</div>
        <div class="table-box">
          <i-table :table="productConfig" :tableData="detail.cementOrderVos">
            <template slot="name"><span>混凝土</span></template>
            <template slot="supplyTime"><span>{{detail.supplyTime}}</span></template>
          </i-table>
        </div>
      </div>

      <div class="confirm-box" v-if="detail.status == 3 || detail.status == 5">
        <div class="btns">
          <el-button type="primary" plain>返回</el-button>
          <el-button type="primary" @click="orderConfirmVisible = true">订单确认</el-button>
        </div>
      </div>

      <div class="car-box" v-if="detail.status > 5">
        <div class="sub-title">
          <span>车辆跟踪</span>
          
        </div>
        <div class="table-box">
          <i-table :table="carConfig" :tableData="taskList" :page-bean="pageBean" @pageChange="pageChange">
            <template slot="searchBox">
              <div class="topsearch">
                <div class="search">
                  <el-input
                    placeholder="请输入车牌"
                    prefix-icon="el-icon-search"
                    class="search-inp"
                    v-model="searchInp"
                    @clear="handSearch"
                    clearable
                  >
                  </el-input>
                  <el-button type="primary" size="medium" @click="handSearch"
                    >搜索</el-button
                  >
                </div>
                <el-button type="primary" size="medium" @click="dialogSendVisible = true">新建发货任务</el-button>
              </div>
            </template>
            <template slot="status" slot-scope="props">
              <span :class="[{'color-warning':props.obj.row.status==0},{'color-success':props.obj.row.status == 2},{'color-primary':props.obj.row.status == 1}]">· {{props.obj.row.status | taskStatus}}</span>
            </template>
            <!-- 发货重量 -->
            <template slot="budget" slot-scope="props">
              <span>{{props.obj.row.budget}}m³</span>
            </template>
            <!-- 收货重量 -->
            <template slot="actual" slot-scope="props">
              <span>{{props.obj.row.actual ? props.obj.row.actual + 'm³' : '-'}}</span>
            </template>
            <!-- 进磅重量 -->
            <template slot="weightBefore" slot-scope="props">
              <span>{{props.obj.row.weightBefore ? props.obj.row.weightBefore + 't' : '-'}}</span>
            </template>
            <!-- 出磅重量 -->
            <template slot="weightAfter" slot-scope="props">
              <span>{{props.obj.row.weightAfter ? props.obj.row.weightAfter + 't' : '-'}}</span>
            </template>
            <template slot="op" slot-scope="props" v-if="props.obj.row.status == 0">
              <el-button type="text" @click="edit(props.obj.$index)">修改</el-button>
              <el-button type="text" @click="del(props.obj.row.id)">删除</el-button>
            </template>
          </i-table>
        </div>
      </div>
    </div>

    <!-- 修改发货任务 -->
    <el-dialog title="修改发货任务" class="deliver-box" width="900px" :visible.sync="dialogDeliverVisible">
      <el-form :model="deliver" :rules="rules" ref="ruleForm" class="deliver-form" size="medium" inline label-width="100px">
        <div class="item">
          <el-form-item label="车辆" prop="truckId">
            <el-select v-model="deliver.truckId" disabled>
              <el-option v-for="(item1,index1) in truckList" :key="index1" :label="item1.num" :value="item1.id"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="司机" prop="driverId">
            <el-select v-model="deliver.driverId" disabled >
              <el-option v-for="(item1,index1) in driverList" :key="index1" :label="item1.name" :value="item1.id"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="规格" prop="cementOrderId">
            <el-select v-model="deliver.cementOrderId" placeholder="请选择规格">
              <el-option v-for="(item,index) in orderCementList" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="发货量" prop="budget">
            <el-input placeholder="请输入发货算量" v-model="deliver.budget">
              <template slot="append">m³</template>
            </el-input>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="发货时间" prop="estimatedDeliveryTime">
            <el-date-picker
              v-model="deliver.estimatedDeliveryTime"
              type="datetime"
              placeholder="选择发货时间">
            </el-date-picker>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDeliverVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" size="medium" :loading="btnLoading" @click="editTask">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 批量发货 -->
    <el-dialog title="批量新增发货任务" class="deliver-box" width="1100px" :visible.sync="dialogSendVisible">
      <el-form :model="driverForm" :rules="rules" ref="ruleForm" class="deliver-form" size="medium" inline label-width="80px">
        <div class="form-item" v-for="(item,index) in driverForm.receiveGoodsQoList" :key="index">
          <el-form-item label="车辆" :prop="'receiveGoodsQoList.' + index +'.truckId'" :rules="[{required: true, message: '请选择车辆'}]">
            <el-select v-model="item.truckId" placeholder="请输入车牌进行选择" filterable @change="changeTruck(index,$event)">
              <el-option v-for="(item1,index1) in truckList" :key="index1" :label="item1.num" :value="item1.id"></el-option>
            </el-select>
            <el-button class="add-btn" type="primary" plain size="medium" @click="addTruckVisible = true">新增车辆</el-button>
          </el-form-item>
          <el-form-item label="司机" :prop="'receiveGoodsQoList.' + index +'.driverId'" :rules="[{required: true, message: '请选择司机'}]">
            <el-select v-model="item.driverId" placeholder="请输入司机姓名进行选择" filterable :loading="driverLoading">
              <el-option v-for="(item1,index1) in driverList" :key="index1" :label="item1.name" :value="item1.id"></el-option>
            </el-select>
            <el-button class="add-btn" type="primary" plain size="medium" @click="addTruckVisible = true">新增司机</el-button>
          </el-form-item>
          <el-form-item label="规格" :prop="'receiveGoodsQoList.' + index +'.cementOrderId'" :rules="[{required: true, message: '请选择规格'}]">
            <el-select v-model="item.cementOrderId" placeholder="请选择规格">
              <el-option v-for="(item1,index1) in orderCementList" :key="index1" :label="item1.name" :value="item1.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发货量" :prop="'receiveGoodsQoList.' + index +'.budget'" :rules="[{required: true, message: '请输入发货量'}]">
            <el-input placeholder="请输入发货算量" v-model="item.budget">
              <template slot="append">m³</template>
            </el-input>
          </el-form-item>
          <el-form-item label="发货时间" :prop="'receiveGoodsQoList.' + index +'.estimatedDeliveryTime'" :rules="[{required: true, message: '请输入发货时间'}]">
            <el-date-picker
              v-model="item.estimatedDeliveryTime"
              type="datetime"
              placeholder="选择发货时间">
            </el-date-picker>
          </el-form-item>

          <i class="del-item el-icon-remove" v-if="index > 0" @click="delItem(index)"></i>
        </div>
        <el-button @click="adddriver">新增发货</el-button>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSendVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" size="medium" :loading="btnLoading" @click="batchAddTask">提 交</el-button>
      </div>
    </el-dialog>

    <!-- 新增车辆 -->
    <el-dialog width="400px" title="新增车辆" append-to-body :visible.sync="addTruckVisible">
      <add-truck @cancel="addTruckVisible = false" @confirm="addTruckVisible = false"></add-truck>
    </el-dialog>
    <!-- 新增司机 -->
    <el-dialog width="800px" title="新增司机" append-to-body :visible.sync="addDriverVisible">
      <add-driver @cancel="addDriverVisible = false" @confirm="addDriverVisible = false"></add-driver>
    </el-dialog>

    <!-- 订单确认 -->
    <el-dialog title="订单确认" width="600px" :visible.sync="orderConfirmVisible"> 
      <div class="confirm-bd">
        <h3>请仔细核对订单信息，并填写预计发货时间。</h3>
        <el-form :model="confirmForm" :rules="confirmRules" ref="confirmForm" label-width="120px" label-position="left">
          <el-form-item label="预计发货时间" prop="estimatedDeliveryTime">
            <el-date-picker
              v-model="confirmForm.estimatedDeliveryTime"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
            v-model="confirmForm.supplierRemarks">
          </el-input>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="orderConfirmVisible = false">取 消</el-button>
          <el-button type="primary" @click="orderConfirm" :loading="btnLoading">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import iTable from "@/components/table/table";
import { PageBean } from "@/utils/page-bean";
import { QueryCondition } from "@/utils/query-condition";
import AddTruck from '@/components/truck/addTruck.vue';
import AddDriver from '@/components/truck/addDriver.vue';
import config from '@/common/config.js'
import moment from 'moment'
export default {
  components: { iTable,AddTruck,AddDriver},
  data() {
    return {
      orderId: null,
      pageLoading: false,
      detail: "",
      //商品表格配置
      productConfig: {
        loading: false,
        hasSelect: false,
        hasIndex: true,
        hasOperation: false,
        hasSearch: false,
        hasPage: false,
        tr: [
          {
            label: "商品名称",
            minWidth: "100",
            prop: "name",
            show: "template",
          },
          {
            label: "标号",
            minWidth: "100",
            prop: "code",
          },
          {
            label: "订货量（m³）",
            minWidth: "100",
            prop: "budget",
          },
          {
            label: "要求供应时间",
            minWidth: "100",
            prop: "supplyTime",
            show:"template"
          },
        ],
      },
      //商品数据
      productData: [],
      //车辆表格配置
      carConfig:{
        loading: false,
        hasSelect: false,
        hasIndex: true,
        hasOperation: false,
        hasSearch: true,
        hasPage: true,
        tr: [
          {
            label: "车牌号",
            minWidth: "70",
            prop: "truckNum",
          },
          {
            label: "司机",
            minWidth: "60",
            prop: "driverName",
          },
          {
            label: "标号",
            minWidth: "60",
            prop: "cementTypeName",
          },
          {
            label: "发货量",
            minWidth: "70",
            prop: "budget",
            show:"template"
          },
          {
            label: "发货时间",
            minWidth: "120",
            prop: "estimatedDeliveryTime",
          },
          {
            label: "进磅重量",
            minWidth: "80",
            prop: "weightBefore",
            show:"template"
          },
          {
            label: "进磅时间",
            minWidth: "120",
            prop: "timeBeforeWeighing",
          },
          {
            label: "出磅重量",
            minWidth: "80",
            prop: "weightAfter",
            show:"template"
          },
          {
            label: "出磅时间",
            minWidth: "120",
            prop: "timeAfterWeighing",
          },
          {
            label: "收货量",
            minWidth: "70",
            prop: "actual",
            show:"template"
          },
          {
            label: "偏差",
            minWidth: "60",
            prop: "offset",
          },
          {
            label: "阈值",
            minWidth: "90",
            prop: "supplyTime",
          },
          {
            label: "状态",
            minWidth: "70",
            prop: "status",
            show:"template",
          },
          {
            label: "操作",
            minWidth: "100",
            prop: "op",
            show:"template",
          },
        ],
      },
      //修改发货任务
      dialogDeliverVisible:false,
      editId:null,
      deliver:{
        truckId:"",
        driverId:"",
        estimatedDeliveryTime:"",
        budget:"",
        procurementPlanId:'',
        cementOrderId:""
      },
      rules:{
        truckId: [{required: true, message: '请选择车辆', trigger: 'change'}],
        driverId: [{required: true, message: '请选择司机', trigger: 'change'}],
        cementOrderId: [{required: true, message: '请选择混凝土规格', trigger: 'change'}],
        budget: [{required: true, message: '请输入发货量', trigger: 'blur'}],
        estimatedDeliveryTime: [{required: true, message: '请选择发货时间', trigger: 'change'}],
      },
      //添加车辆及人员
      addTruckVisible:false,
      truckLoading:false,
      truckList:[],
      addDriverVisible:false,
      driverLoading:false,
      driverList:[],
      //所需混凝土列表
      orderCementList:[],
      //任务列表
      pageBean: new PageBean(10, 1, 0),
      searchInp:"",
      queryCondition: new QueryCondition(),
      taskList:[],
      //订单确认
      orderConfirmVisible:false,
      confirmForm:{
        estimatedDeliveryTime:"",
        supplierRemarks:"",
      },
      btnLoading:false,
      confirmRules:{
        estimatedDeliveryTime: [{ required: true, message: '请选择预计发货时间', trigger: 'change' }],
      },
      //批量发货
      dialogSendVisible:false,
      driverForm:{
        receiveGoodsQoList:[{
          truckId:"",
          driverId:"",
          estimatedDeliveryTime:"",
          budget:"",
          procurementPlanId:'',
          cementOrderId:""
        }]
      }
    };
  },
  filters:{
    statusTxt(val){
      return config.orderStatus[val]
    },
    taskStatus(val){
      return config.taskStatus[val]
    }
  },
  created() {
    this.orderId = this.$route.query.id;
    this.getDetail();
    this.getOrderCementList()
    this.getTruckList()
    this.getDriverList()
  },
  methods: {
    //计算订单状态
    getStatus(val){
      //订单在采购方确认之前均为待确定状态
      if(val == 3 || val == 4 || val == 5){
        return 0
      }
      if(val == 6) return 1
      if(val == 7) return 2
      if(val == 8 || val == 9) return 3
    },
    getDetail() {
      this.pageLoading = true;
      this.$api
        .orderDetail(this.orderId)
        .then((res) => {
          this.detail = res;
          this.driverForm.receiveGoodsQoList[0].estimatedDeliveryTime = this.detail.estimatedDeliveryTime
          this.pageLoading = false;
          //当状态为供应商已确认时才获取任务列表
          if(res.status > 5) this.getTaskList()
        })
        .catch(() => {
          this.pageLoading = false;
        });
    },
    //获取订单所需混凝土规格列表
    getOrderCementList(){
      this.$api.orderCement(this.orderId).then(res => {
        this.orderCementList = res
      })
    },
    //获取任务列表
    getTaskList(){
      this.queryCondition.procurementPlanId = this.orderId
      this.carConfig.loading = true;
      this.$api.taskList(this.queryCondition).then(res => {
        this.taskList = res.records
        this.pageBean.Total = res.total;
        this.carConfig.loading = false;
      }).catch(()=>{this.carConfig.loading = false})
    },
    //分页
    pageChange(pageBean) {
      this.queryCondition.current = pageBean.pageIndex;
      this.queryCondition.size = pageBean.pageSize;
      this.getTaskList();
    },
    getTruckList(){
      this.$api.truckList({current:1,size:1000}).then(res => {
        this.truckList = res.records
      })
    },
    getDriverList(){
      this.$api.driverList({current:1,size:1000}).then(res => {
        this.driverList = res.records
      })
    },
    //订单确认
    orderConfirm(){
      this.$refs.confirmForm.validate((valid) => {
        if(valid){
          this.btnLoading = true
          let data = JSON.parse(JSON.stringify(this.confirmForm))
          data.estimatedDeliveryTime = moment(data.estimatedDeliveryTime).format('YYYY-MM-DD HH:mm:ss')
          data.id = this.orderId
          this.$api.orderConfirm(data).then(res => {
            this.btnLoading = false
            this.orderConfirmVisible = false
            this.confirmForm = {
              estimatedDeliveryTime:"",
              supplierRemarks:"",
            },
            this.getDetail()
          }).catch(()=>{this.btnLoading = false})
        }
      })
    },
    addTaskBtn(){
      this.editId = null
      this.btnLoading = false
      this.dialogDeliverVisible = true
    },
    //搜索
    handSearch() {
      this.queryCondition.keywords = this.searchInp;
      this.queryCondition.current = 1;
      this.pageBean.pageIndex = 1;
      this.getTaskList();
    },
    //批量新增发货任务
    batchAddTask(){
      this.$refs.ruleForm.validate(async (valid) => {
        if(valid){
          let form = JSON.parse(JSON.stringify(this.driverForm))
          form.receiveGoodsQoList.map(item => {
            item.procurementPlanId = this.orderId
            item.estimatedDeliveryTime = moment(item.estimatedDeliveryTime).format('YYYY-MM-DD HH:mm:ss')
          })
          this.btnLoading = true
          this.$api.AddOrderBatchTask(form).then(res => {
            this.driverForm = {
              receiveGoodsQoList:[
                {
                  truckId:"",
                  driverId:"",
                  estimatedDeliveryTime:this.detail.estimatedDeliveryTime,
                  budget:"",
                  procurementPlanId:'',
                  cementOrderId:""
                }
              ]
            }
            this.dialogSendVisible = false
            this.editId = null
            this.btnLoading = false
            this.getTaskList()
          })
        }
      })
    },
    //删除发货任务
    del(id){
      this.$confirm('是否撤销该车辆发货任务', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'}).then(res => {
            this.$api.delOrderTask(id).then(res => {
              this.$message.success('操作成功')
              this.getTaskList();
            })
          })
    },
    //编辑发货任务
    edit(index){
      this.editId = this.taskList[index].id
      this.btnLoading = false
      for(let k in this.deliver){
        this.deliver[k] = this.taskList[index][k]
      }
      this.dialogDeliverVisible = true
    },
    //修改任务
    editTask(){
      this.$refs.ruleForm.validate(async (valid) => {
        if(valid){
          let data = JSON.parse(JSON.stringify(this.deliver))
          data.procurementPlanId = this.orderId
          data.id = this.editId
          data.estimatedDeliveryTime = moment(data.estimatedDeliveryTime).format('YYYY-MM-DD HH:mm:ss')
          this.btnLoading = true
          this.$api.editOrderTask(data).then(res => {
            this.btnLoading = false
            this.editId = null
            this.dialogDeliverVisible = false
            this.getTaskList()
          })
        }
      })
    },
    //新增批量
    adddriver(){
      this.driverForm.receiveGoodsQoList.push({
        truckId:"",
        driverId:"",
        estimatedDeliveryTime:this.detail.estimatedDeliveryTime,
        budget:"",
        procurementPlanId:'',
        cementOrderId:""
      })
    },
    //改变车牌
    changeTruck(index,e){
      let data = this.truckList.find(item => {
        return item.id == e
      })
      this.driverForm.receiveGoodsQoList[index].budget = data.volume
    },
    delItem(index){
      this.driverForm.receiveGoodsQoList.splice(index,1)
    }
  },
};
</script>

<style lang="scss" scoped>
.detail-box {
  .title {
    font-size: 20px;
    height: 70px;
    line-height: 70px;
    padding: 0 24px;
    border-bottom: 1px solid #eee;
  }
  .steps {
    width: 100%;
    margin: 24px auto 0;
  }
  .info-box {
    padding:24px;
    .item {
      height: 90px;
      padding: 0 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #f6f8f9;
      border-radius: 2px;
      .label {
        font-size: 14px;
        margin: 0;
      }
      .value {
        margin: 0;
        font-size: 32px;
        font-weight: 700;
        margin-top: 6px;
        span {
          font-size: 14px;
          color: #888;
          font-weight: normal;
          margin-left: 4px;

        }
      }
    }
  }
  .sub-title {
    font-size: 18px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    p{
      margin: 0;
    }
  }
  .order-box {
    margin: 0 24px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eee;
    .order-info {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .item {
        width: 33%;
        margin: 0 0 18px;
        display: flex;
        align-items: center;
        .value {
          color: #666;
          i{
            font-style: normal;
            &::after{
              content: '，';
            }
            &:last-child::after{
              content: '';
            }
          }
        }
        &.lang {
          width: 100%;
        }
      }
    }
  }
  .pro-box {
    padding:0 24px 24px;
  }
  .table-box {}
  .car-box{
    padding:0 24px 24px;
    .btns{
      display: flex;
      justify-content: flex-end;
    }
  }
  .confirm-box{
    padding:20px 0 30px;
    .btns{
      display: flex;
      justify-content: center;
    }
  }
}

.confirm-bd{
  h3{
    margin: 0 0 30px;
  }
  .dialog-footer{
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}

.line {
  height: 24px;
  background: #f6f8f9;
}

.deliver-form{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .item{
    width: 50%;
    display: flex;
    align-items: center;
  }
  .add-btn{
    margin-left: 8px;
  }
  .form-item{
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
    position: relative;
    .del-item{
      position: absolute;
      top: 50%;
      right: 20px;
      font-size:28px;
      color: #f00;
      transform: translateY(-50%);
      cursor: pointer;
    }
  }
}
.color-success{
  color: #67C23A;
}
.color-warning{
  color: #E6A23C;
}
.color-primary{
  color: #409EFF;
}
.topsearch{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .select{
    display: flex;
    align-items: center;
    label{
      font-size: 14px;
      color: #333;
      margin-right: 20px;
    }
  }
  .search-inp{
    width: 400px;
    margin-right: 20px;
  }
}
</style>